/**
 * Created by dazq on 16/11/25.
 */
import React, {Component} from 'react';
import {View, StyleSheet, Text, Dimensions, PropTypes, TextInput} from 'react-native';
import Button from 'react-native-button'
import {Actions} from 'react-native-router-flux';
const {height, width} = Dimensions.get('window');
import Toast from 'react-native-root-toast'; // 引入类库

export default class LoginPage extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isAllowLogin: false,
            visible: false
        };

    }
    _onChangeInput(name) {
        console.log(name + this.myTextInput.value);
        userInfo.name = this.refs.myTextInput
        if (userInfo.isVaild()) {
            this.setState({isAllowLogin: true,visible: true})
        } else {
            this.setState({isAllowLogin: false})
        }

    }

    _onChangePassInput(pwd) {
        userInfo.pwd = pwd
        if (userInfo.isVaild()) {
            this.setState({isAllowLogin: true})
        } else {
            this.setState({isAllowLogin: false})
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.centerView}>
                    <View style={styles.subCenterView}>
                        <View style={styles.subViewStyle}>
                            <Text style={styles.textStyle}>用户名:</Text>
                            <TextInput style={styles.textInputStyle} placeholder={'请输入用户名'}
                                       placeholderTextColor={"#DCDCDC"}
                                       onChange={(event)=>{this._onChangeInput(event.nativeEvent.text)}}
                                       clearButtonMode="while-editing" defaultValue={'18667919609'} ref={(ref) => this.myTextInput = ref}/>
                        </View>
                        <View style={styles.subViewStyle}>
                            <Text style={styles.textStyle}>密 码:</Text>
                            <TextInput style={styles.textInputStyle} placeholder={'请输入密码'} secureTextEntry={true}
                                       placeholderTextColor={"#DCDCDC"}
                                       onChange={(event)=>{this._onChangePassInput(event.nativeEvent.text)}}
                                       clearButtonMode="while-editing"
                            />
                        </View>
                    </View>
                    <Button containerStyle={styles.buttonStyle}
                            style={{fontSize: 20, color: 'green'}}
                            styleDisabled={{color: 'red'}}
                            disabled={!this.state.isAllowLogin}
                            onPress={Actions.SimpleChart}
                    >
                        登录
                    </Button>

                </View>
                <Toast
                    visible={this.state.visible}
                    position={100}
                    shadow={false}
                    animation={false}
                    hideOnPress={true}
                >This is a message</Toast>
            </View>
        )
    }
}
var userInfo = {
    name:'',
    pwd:'',
    isVaild(){
        if ((/^1[34578]\d{9}$/.test(this.name)) && this.pwd.length >= 6) {
            return true;
        } else
            return false;
    }

}

var styles = StyleSheet.create({
    container: {
        marginTop: 60,
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#AFEEEE'
    },
    centerView: {
        width: width - 40,
        marginLeft: 20,
        backgroundColor: 'rgba(0,0,0,0.5)',
        height: 200,
        justifyContent: 'center',
        marginBottom: 50,
        borderRadius: 5,
    },
    textStyle: {
        color: 'white',
        flex: 1,
        fontSize: 20
    },
    subViewStyle: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    textInputStyle: {
        flex: 3,
        fontSize: 20,
        color: 'white'
    },
    subCenterView: {
        width: width - 40 - 40,
        height: 100,
        marginLeft: 20,
    },
    buttonStyle: {
        padding: 10,
        height: 45,
        overflow: 'hidden',
        borderRadius: 4,
        backgroundColor: 'white',
        marginLeft: 10,
        marginRight: 10
    }
})